<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>#{get 'title' /}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="@{'/public/images/bug.png'}">
    <link href="@{'/public/css/styles.css'}" rel="stylesheet" type="text/css"/>

#{get 'jqueryStyles' }
    <link rel='stylesheet' type='text/css' href="@{'/public/css/redmond/jquery-ui-1.8.18.custom.css'}"/>
    *{<link href="@{'/public/css/custom-theme/jquery-ui-1.7.3.custom.css'}" rel="stylesheet" type="text/css"/>}*
#{/}
#{get 'jqueryScripts' }
    <script src="@{'/public/js/jquery-1.7.1.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    *{<script src="@{'/public/js/jquery-1.4.4.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>}*
    <script type='text/javascript' src="@{'/public/js/jquery-ui-1.8.11.custom.min.js'}"></script>
    <script type='text/javascript' src="@{'/public/js/jquery-ui-i18n.js'}"></script>
    <script src="@{'/public/js/domscripts.js'}"></script>
#{/}

    <script src="@{'/public/js/functions.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script type="text/javascript">
        $().ready(function () {
            $('#alerts div').hide();
            $('#alerts div').animate({height:'toggle'}, 1000).animate({opacity:1}, 4000).animate({height:'toggle'}, 1000);
        });
    </script>


    <!--[if lte IE 7]>
    <link href="../yaml/core/iehacks.css" rel="stylesheet" type="text/css"/>
    <![endif]-->

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

#{get 'moreStyles' /}
#{get 'moreStyles2' /}
#{get 'moreScripts' /}
#{get 'moreScripts2' /}

    <script type="text/javascript">
        $(document).ready(function () {
            $("#loginDialog").dialog({ autoOpen:false, modal:true });
            $('#doLogin').click(function () {
                $("#loginDialog").dialog("open");
                $("#username").focus();
            });
        });
    </script>
</head>
<body>
<ul class="ym-skiplinks">
    <li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
    <li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
</ul>
<header>
    <div style="float:right">
    #{if session.get("username") == null }
        <a href="#" id="doLogin">Login</a>
    #{/if}
    #{else}
        Session iniciada como <b>${ session.get("name")}</b> | <a href="@{Security.logout()}">Log out</a>
    #{/else}
    </div>
    <h1>#{get 'title'}STAGE#{/}</h1>
    <h3>#{get 'subtitle'}Software de Administracion y Gestion de Eventos Academicos#{/}</h3>

</header>
<nav id="level2" class="fix" role="navigation">
    <div class="ym-wrapper">
        <div class="ym-wbox">
            <div class="ym-hlist">
            #{get 'menu' /}
                *{<form class="ym-searchform">}*
                    *{<input class="ym-searchfield" type="search" placeholder="Search..."/>}*
                    *{<input class="ym-searchbutton" type="submit" value="Search"/>}*
                *{</form>}*
            </div>
        </div>
    </div>
</nav>
<div style="position: fixed; top: 0; width: 100%; z-index: 10000" align="center">
    <div id="alerts" class="ui-widget" style="width: 40%">
    #{if flash.error}
        <div class="ui-state-error ui-corner-all">
            <p style='margin: 0'><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                <strong>Error: </strong>#{verbatim}${flash.error}#{/verbatim} </p>
        </div>
    #{/if}
    #{if flash.success}
        <div class="ui-state-highlight ui-corner-all" style="padding: 0">
            <p style='margin: 0'><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                <strong>Hey! </strong>#{verbatim}${flash.success}#{/verbatim}</p>
        </div>
    #{/if}
    </div>
</div>
<div id="main" class="ym-clearfix" role="main">
    <div class="ym-wrapper">
        <div class="ym-wbox">
            <div class="ym-cbox">
            #{doLayout /}

            </div>
        </div>
    </div>
</div>
<footer role="contentinfo">
    <div class="ym-wrapper">
        <div class="ym-wbox">
            <div class="ym-grid linearize-level-2">
                <div class="ym-g66 ym-gl">
                    <div class="ym-gbox-left">
                        <p>&copy; 2005 &ndash; 2012 by Dirk Jesse, <a href="http://www.highresolution.info">Highresolution.info</a><br>
                            Code and Documentation licensed under <a
                                    href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>.</p>

                        <p><a href="../imprint.html">Imprint</a> | <a href="http://shop.yaml.de">YAML-Shop</a>
                            administrated by <a href="http://www.itratos.de">Itratos</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<div id="loginDialog" title="Login">
#{form @Authentication.verify(), method:'POST', id:'creationForm', class:'ym-form ym-full', style:'margin:0'}
    <div class="ym-fbox-text">
        <label for="username">Correo</label>
        <input type="text" name="username" id="username" size="20"/>
    </div>
    <div class="ym-fbox-text">
        <label for="password">Password</label>
        <input type="text" name="password" id="password" size="20"/>
    </div>
    <div class="ym-fbox-button">
        <input type="submit" class="ym-button" value="Entrar" id="submit" name="submit"/>
    </div>
#{/form}
</div>
<script src="@{'public/yaml/core/js/yaml-focusfix.js'}"></script>
</body>
</html>